<!--
 * @Autor: Ruohong Yu
 * @Date: 2023-04-02 21:00:53
 * @Description: file content
 * @FilePath: \ebook\src\views\user\UserInfo.vue
-->
<template>
  <div class="userinfo">
    <div class="userinfo-wrapper">
      <div class="userinfo-title">
        <div class="back" @click="back">
          <span class="icon-back"></span>
        </div>
      </div>
      <div class="userinfo-img-wrapper">
        <div class="userinfo-img">
          <img class="circleImg" :src="imgsrc"/>
        </div>
        <input type="file" id="file" name="image" accept="image/*" @change='onchangeImgFun'>
        <div class="userinfo-changeimg" @click="changeImg">
          {{$t('user.changeImg')}}
        </div>
      </div>
      <div class="userinfo-form">
        <div class="userinfo-form-title">{{$t('user.basicInfo')}}</div>
        <div class="userinfo-form-item">
          <div class="userinfo-nameicon icon">
          </div>
          <div class="userinfo-form-item-right">
            <div class="userinfo-form-item-right-title">{{$t('user.username')}}
              <span class="tip" v-if="userError">{{userErrorText}}</span>
            </div>
            <input class="userinfo-name" @blur="userUsed" v-model="username" placeholder="{{$t('user.username')}}">
          </div>
        </div>
        <div class="userinfo-form-item">
          <div class="userinfo-emailicon icon">
          </div>
          <div class="userinfo-form-item-right">
            <div class="userinfo-form-item-right-title">{{$t('user.email')}}
              <span class="tip" v-if="emailError">{{emailErrorText}}</span>
            </div>
            <input class="userinfo-email" @blur="emailUsed" v-model="email" placeholder="no email">
          </div>
        </div>
        <div class="userinfo-form-btn" @click="usermodify()">{{$t('user.save')}}</div>
      </div>
      <div class="userinfo-form">
        <div class="userinfo-form-bg"></div>
        <div class="userinfo-form-title">{{$t('user.changePwd')}}</div>
        <div class="userinfo-form-item ">
          <div class="userinfo-passwordicon icon">
          </div>
          <div class="userinfo-form-item-right">
            <div class="userinfo-form-item-right-title">{{$t('user.emailVerifyCode')}}
              <span class="tip" v-if="emailcodeError">{{emailcodeErrorText}}</span>
            </div>
            <input class="userinfo-pwd" @blur="emailcodeUsed" v-model="emailcode" placeholder="******">
          </div>
          <div class="userinfo-form-item-btn" v-show="show" @click="sendEmail">
            {{$t('user.sendCode')}}
          </div>
          <div class="userinfo-form-item-btn notclick" v-show="!show">
            {{count}}{{$t('user.time')}}
          </div>
        </div>
        <div class="userinfo-form-item ">
          <div class="userinfo-passwordicon icon">
          </div>
          <div class="userinfo-form-item-right">
            <div class="userinfo-form-item-right-title">{{$t('user.password')}}
              <span class="tip" v-if="pwdError">{{pwdErrorText}}</span>
            </div>
            <input type="password" class="userinfo-pwd" @blur="pwdUsed" v-model="password" placeholder="******">
          </div>
        </div>
        <div class="userinfo-form-item userinfo-repwd">
          <div class="userinfo-passwordicon icon">
          </div>
          <div class="userinfo-form-item-right">
            <div class="userinfo-form-item-right-title">{{$t('user.repassword')}}
              <span class="tip" v-if="repwdError">{{repwdErrorText}}</span>
            </div>
            <input type="password" class="userinfo-pwd" @blur="repwdUsed" v-model="repassword" placeholder="******">
          </div>
        </div>
        <div class="userinfo-form-btn" @click="pwdmodify()">{{$t('user.save')}}</div>
      </div>
      <div class="logout" @click="onLogout">{{$t('shelf.logout')}}</div>
    </div>
    <toast :text="toastText" ref="toast"></toast>
  </div>
</template>

<script>
import { modifyPwd, modifyUser, sendEmailCode, updateUserAvatar } from '@/api/user'
import Toast from '@/components/common/Toast.vue'
import { clearLocalForage } from '@/utils/localForage'
import crypto from '@/utils/crypto'
import { clearLocalStorage, getAvatar, getUserEmail, getUsername, saveAvatar, saveUserEmail, saveUsername } from '@/utils/localStorage'
export default {
  components: { Toast },
  data () {
    return {
      username: '',
      email: '',
      password: '',
      repassword: '',
      toastText: '',
      pwdError: false,
      pwdErrorText: '',
      repwdError: false,
      repwdErrorText: '',
      userError: false,
      userErrorText: '',
      emailError: false,
      emailErrorText: '',
      emailcode: '',
      emailcodeError: false,
      emailcodeErrorText: '',
      show: true,
      count: '',
      timer: null,
      imgsrc: null
    }
  },
  mounted () {
    this.username = getUsername()
    this.email = getUserEmail()
    const img = getAvatar()
    this.imgsrc = img === undefined ? require('../../assets/images/loginbg.png') : img === null ? require('../../assets/images/loginbg.png') : img
  },
  methods: {
    onLogout () {
      clearLocalStorage()
      clearLocalForage()
      this.$router.push({
        path: '/login'
      })
    },
    back () {
      this.$router.go(-1)
    },
    sendEmail () {
      sendEmailCode(getUserEmail()).then((res) => {
        if (res.data.status === 0) {
          const TIME_COUNT = 60
          if (!this.timer) {
            this.count = TIME_COUNT
            this.show = false
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= TIME_COUNT) {
                this.count--
              } else {
                this.show = true
                clearInterval(this.timer)
                this.timer = null
              }
            }, 1000)
          }
        }
      })
    },
    emailcodeUsed () {
      if (!/^[A-Za-z0-9]+$/.test(this.emailcode)) {
        this.emailcodeErrorText = '*验证码由数字英文组成'
        this.emailcodeError = true
      } else {
        this.emailcodeError = false
      }
    },
    userUsed () {
      if (!/^\w{2,10}$/.test(this.username)) {
        this.userErrorText = '*用户名由数字、英文或下划线组成，长度在2-10之间'
        this.userError = true
      } else {
        this.userError = false
      }
    },
    pwdUsed () {
      if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])[a-zA-Z0-9]{8,20}$/.test(this.password)) {
        this.pwdErrorText = '*密码需包含大小写字母和数字，长度在8-20之间'
        this.pwdError = true
      } else {
        this.pwdError = false
      }
    },
    repwdUsed () {
      if (this.password !== this.repassword) {
        this.repwdErrorText = '*重复密码必须和密码相同'
        this.repwdError = true
      } else {
        this.repwdError = false
      }
    },
    emailUsed () {
      if (!/[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/.test(this.email)) {
        this.emailErrorText = '*请输入有效邮箱'
        this.emailError = true
      } else {
        this.emailError = false
      }
    },
    usermodify () {
      if (!this.userError && !this.emailError) {
        modifyUser(getUsername(), this.username, this.email).then((res) => {
          if (res.data.status === 0) {
            this.toastText = '保存成功'
            this.$refs.toast.updateText('保存成功')
            this.$refs.toast.show()
            saveUsername(this.username)
            saveUserEmail(this.email)
          } else if (res.data.status === 2) {
            this.userError = true
            this.userErrorText = '该用户名已存在'
          } else {
            this.toastText = '保存失败'
            this.$refs.toast.updateText('保存失败')
            this.$refs.toast.show()
          }
        })
      }
    },
    pwdmodify () {
      this.emailcodeUsed()
      this.pwdUsed()
      this.repwdUsed()
      if (!this.pwdError && !this.repwdError && !this.emailcodeError) {
        const cryptopwd = crypto.Encrypt(this.password)
        modifyPwd(getUserEmail(), this.emailcode, cryptopwd).then((res) => {
          if (res.data.status === 0) {
            this.toastText = '保存成功'
            this.$refs.toast.updateText('保存成功')
            this.$refs.toast.show()
            this.emailcode = ''
            this.password = ''
            this.repassword = ''
          } else if (res.data.status === 2) {
            this.emailcodeErrorText = '*验证码不正确'
            this.emailcodeError = true
          } else {
            this.toastText = '保存失败'
            this.$refs.toast.updateText('保存失败')
            this.$refs.toast.show()
          }
        })
      }
    },
    changeImg () {
      document.getElementById('file').click()
    },
    onchangeImgFun (e) {
      const f = e.target.files[0]
      if (f.type === 'image/jpeg' || f.type === 'image/jpg' || f.type === 'image/png') {
        if (f.size <= 50 * 1024 * 1024) {
          updateUserAvatar(getUsername(), f).then((res) => {
            if (res.data.status === 0) {
              this.imgsrc = res.data.img_url.img_url
              saveAvatar(this.imgsrc)
            } else {
              this.toastText = '头像更换失败'
              this.$refs.toast.updateText('头像更换失败')
              this.$refs.toast.show()
            }
          })
        } else {
          this.toastText = '头像仅支持jpeg、jpg和png格式,文件大小在5M内'
          this.$refs.toast.updateText('头像仅支持jpeg、jpg和png格式,文件大小在5M内')
          this.$refs.toast.show()
        }
      } else {
        this.toastText = '头像仅支持jpeg、jpg和png格式,文件大小在5M内'
        this.$refs.toast.updateText('头像仅支持jpeg、jpg和png格式,文件大小在5M内')
        this.$refs.toast.show()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@media screen and (min-width:768px) {
  .userinfo{
    background: #FFF5F5;
    height: 100%;
    width: 100%;
    .userinfo-wrapper{
      background-color: #fff;
      width: 60%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      box-shadow: 1px 5px 20px 10px rgba(0, 0, 0, 0.459);
      .userinfo-title{
        height: px2rem(40);
        display: flex;
        justify-content: space-between;
        font-size: px2rem(20);
        color: #8698C0;
        .back{
          cursor: pointer;
          width: px2rem(30);
          height: px2rem(40);
          margin-left: px2rem(10);
          line-height: px2rem(40);
        }
      }
      .userinfo-img-wrapper{
        height: px2rem(100);
        width: 100%;
        margin-top: px2rem(10);
        @include columnCenter;
        .userinfo-img{
          margin: 0 auto;
          @include center;
          .circleImg{
            border-radius: 3px;
            width:px2rem(70);
            height:px2rem(70);
          }
        }
        #file{
          opacity: 0;
        }
        .userinfo-changeimg{
          cursor: pointer;
          margin-top: px2rem(10);
          font-size: px2rem(15);
          font-weight: bold;
          color: #8698C0;
        }
      }
      .userinfo-form{
        position: relative;
        width: 85%;
        margin: px2rem(20) auto;
        border-radius: 3px;
        color: white;
        padding: px2rem(10);
        // box-shadow: 5px 0 5px 0px #C67FFF, 0 5px 0px 0px #73DAFB;
        background: #8698c0c7;
        .userinfo-form-title{
          font-size: px2rem(18);
          font-weight: 300;
          border-bottom: 1px solid #fff;
        }
        .userinfo-form-item{
          height: px2rem(50);
          display: flex;
          .icon{
            display:inline-block;
            width:px2rem(25);
            height:px2rem(25);
            margin-right: px2rem(10);
            margin-left: px2rem(10);
            margin-top: px2rem(15);
          }
          .userinfo-nameicon{
            background:url('../../assets/images/userinfoname.png') no-repeat center;
            background-size:contain;
          }
          .userinfo-emailicon{
            background:url('../../assets/images/userinfoemail.png') no-repeat center;
            background-size:contain;
          }
          .userinfo-passwordicon{
            background:url('../../assets/images/userinfopwd.png') no-repeat center;
            background-size:contain;
          }

          .userinfo-form-item-right{
            width: 100%;
            height: 100%;
            font-weight: 300;
            margin: px2rem(5);
            display: flex;
            flex-direction: column;
            .tip{
              font-size: px2rem(10);
              color: rgb(201, 0, 0);
            }
            .userinfo-form-item-right-title{
              font-size: px2rem(13);
            }
            input{
              height: px2rem(20);
              font-weight: 100;
            }
          }
          .userinfo-form-item-btn{
            cursor: pointer;
            font-size: px2rem(10);
            background-color: #3B5998;
            width: px2rem(110);
            height: px2rem(30);
            line-height: px2rem(30);
            margin: px2rem(5) auto;
            margin-top: px2rem(10);
            text-align: center;
            border-radius: 3px;
          }
          .notclick{
            cursor: not-allowed;
            pointer-events: none;
            background-color: #5b5bc6d7;
          }
          input{
            outline-style: none ;
            border: 0;
            background-color:transparent;
            width: 100%;
            font-family:sans-serif;
            font-size:px2rem(15);
            color:#fff;
          }
          input::-webkit-input-placeholder{
              color:#fff;
          }
          input:focus{
            border-bottom:2px solid #445b53;
            background-color:transparent;
            transition: all 0.2s ease-in;
            font-family:sans-serif;
            color:#fff;
          }
          input:hover{
            border-bottom:2px solid #445b53;
            background-color:transparent;
            transition: all 0.2s ease-in;
            font-family:sans-serif;
            color:#fff;
          }
          input:-webkit-autofill {
            /* 修改默认背景框的颜色 */
            box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
            /* 修改默认字体的颜色 */
            -webkit-text-fill-color: #fff;
          }
          input:-webkit-autofill::first-line {
            /* 修改默认字体的大小 */
            font-size: px2rem(10);
            /* 修改默认字体的样式 */
            font-weight:bold;
          }
        }
        .userinfo-form-btn{
          cursor: pointer;
          width: 70%;
          height: px2rem(30);
          line-height: px2rem(30);
          text-align: center;
          font-size: px2rem(15);
          margin: px2rem(5) auto;
          border-radius: 5px;
          background-color: #3B5998;
        }
      }
      .logout{
        cursor: pointer;
        margin: 0 auto;
        font-size: px2rem(15);
        text-align: center;
        width: px2rem(60);
        color: #666;
        border-bottom:1px solid #666;
        margin-bottom: px2rem(10);
      }
    }
  }
}
@media screen and (max-width:767px) {
  .userinfo{
    background: #FFF5F5;
    height: 100%;
    width: 100%;
    .userinfo-wrapper{
      background-color: #fff;
      width: 100%;
      height: 100%;
      box-shadow: 1px 5px 20px 10px rgba(0, 0, 0, 0.459);
      .userinfo-title{
        height: px2rem(40);
        width: 100%;
        color: #8698C0;
        .back{
          cursor: pointer;
          width: px2rem(30);
          height: px2rem(40);
          margin-left: px2rem(10);
          line-height: px2rem(40);
          font-size: px2rem(20);
        }
      }
      .userinfo-img-wrapper{
        height: px2rem(100);
        width: 100%;
        margin-top: px2rem(10);
        @include columnCenter;
        .userinfo-img{
          margin: 0 auto;
          @include center;
          .circleImg{
            border-radius: 3px;
            width:px2rem(70);
            height:px2rem(70);
          }
        }
        #file{
          opacity: 0;
        }
        .userinfo-changeimg{
          cursor: pointer;
          margin-top: px2rem(10);
          font-size: px2rem(15);
          font-weight: bold;
          color: #8698C0;
        }
      }
      .userinfo-form{
        position: relative;
        width: 85%;
        margin: px2rem(20) auto;
        border-radius: 3px;
        color: white;
        padding: px2rem(10);
        // box-shadow: 5px 0 5px 0px #C67FFF, 0 5px 0px 0px #73DAFB;
        background: #8698c0c7;
        .userinfo-form-title{
          font-size: px2rem(18);
          font-weight: 300;
          border-bottom: 1px solid #fff;
        }
        .userinfo-form-item{
          height: px2rem(50);
          display: flex;
          .icon{
            display:inline-block;
            width:px2rem(25);
            height:px2rem(25);
            margin-right: px2rem(10);
            margin-left: px2rem(10);
            margin-top: px2rem(15);
          }
          .userinfo-nameicon{
            background:url('../../assets/images/userinfoname.png') no-repeat center;
            background-size:contain;
          }
          .userinfo-emailicon{
            background:url('../../assets/images/userinfoemail.png') no-repeat center;
            background-size:contain;
          }
          .userinfo-passwordicon{
            background:url('../../assets/images/userinfopwd.png') no-repeat center;
            background-size:contain;
          }
          .userinfo-form-item-right{
            width: 100%;
            height: 100%;
            font-weight: 300;
            margin: px2rem(5);
            display: flex;
            flex-direction: column;
            .tip{
              font-size: px2rem(10);
              color: rgb(201, 0, 0);
            }
            .userinfo-form-item-right-title{
              font-size: px2rem(13);
            }
            input{
              height: px2rem(20);
              font-weight: 100;
            }
          }
          .userinfo-form-item-btn{
            cursor: pointer;
            font-size: px2rem(10);
            background-color: #3B5998;
            width: px2rem(110);
            height: px2rem(30);
            line-height: px2rem(30);
            margin: px2rem(5) auto;
            margin-top: px2rem(10);
            text-align: center;
            border-radius: 3px;
          }
          .notclick{
            cursor: not-allowed;
            pointer-events: none;
            background-color: #3B5998;
          }
          input{
            outline-style: none ;
            border: 0;
            background-color:transparent;
            width: 100%;
            font-family:sans-serif;
            font-size:px2rem(15);
            color:#fff;
          }
          input::-webkit-input-placeholder{
              color:#fff;
          }
          input:focus{
            border-bottom:2px solid #445b53;
            background-color:transparent;
            transition: all 0.2s ease-in;
            font-family:sans-serif;
            color:#fff;
          }
          input:hover{
            border-bottom:2px solid #445b53;
            background-color:transparent;
            transition: all 0.2s ease-in;
            font-family:sans-serif;
            color:#fff;
          }
          input:-webkit-autofill {
            /* 修改默认背景框的颜色 */
            box-shadow: 0 0 0px px2rem(1000)  #89AB9E inset !important;
            /* 修改默认字体的颜色 */
            -webkit-text-fill-color: #fff;
          }
          input:-webkit-autofill::first-line {
            /* 修改默认字体的大小 */
            font-size: px2rem(10);
            /* 修改默认字体的样式 */
            font-weight:bold;
          }
        }
        .userinfo-form-btn{
          cursor: pointer;
          width: 70%;
          height: px2rem(30);
          line-height: px2rem(30);
          text-align: center;
          font-size: px2rem(15);
          margin: px2rem(5) auto;
          border-radius: 5px;
          background-color: #3B5998;
        }
      }
      .logout{
        cursor: pointer;
        margin: 0 auto;
        font-size: px2rem(15);
        text-align: center;
        width: px2rem(60);
        color: #666;
        border-bottom:1px solid #666;
        margin-bottom: px2rem(10);
      }
    }
  }
}

</style>
